function ubi_menu(div) {
this.div = div;
this.show_proc;
this.hide_proc;
this.items = [];
this.is_onhover = false;
this.write = function () {
    var arr = [];
    for (var i = 0; i < this.items.length; i+=1) {
        arr.push(this.items[i].html);
    }
    var _this = this;
    $(this.div).addClass('ubi-menu');
    $(this.div).html('<ul class="ubi-menu-inner">'+ arr.join('') +'</ul>');
    $(this.div).hover(function () {
            _this.is_onhover = true;
        },function (){
            _this.hide();
            _this.is_onhover = false;
        });
    return this;
};

this.option = function (key, val) {
    if (val) {
        this[key] = val;
    }
    return this[key];
}

this.click = function(idx, proc) {
    var _this = this;
    if (proc) {
        this.items[idx].click_proc = proc;
        $(this.items[idx].div).click(function (event) {
            if (_this.items[idx].enable
                && _this.items[idx].click_proc)
            {
                _this.items[idx].click_proc(event);
            }
        });
    } else {
        this.items[idx].click_proc.apply([event]);
    }
    return this;
};

this.append = function (menu_item) {
    this.items.push(menu_item);
    return this;
};

this.remove = function (idx) {
    this.items.splice(idx, 1);
    this.get_item_div(idx).remove();
    return this;
};

this.enable = function (idx) {
    this.get_item_div(idx).addClass('ubi-menu-item')
    this.get_item_div(idx).removeClass('ubi-menu-item-disabled');
    this.items[idx].enable = true;
    return this;
};

this.disable = function (idx) {
    this.get_item_div(idx).addClass('ubi-menu-item-disabled');
    this.get_item_div(idx).removeClass('ubi-menu-item')
    this.items[idx].enable = false;
    return this;
};

this.invoke = function (proc_name) {
    this.items[idx][proc_name].apply();
    return this;
};

this.show = function () {
    $(this.div).show();
    return this;
};

this.hide = function () {
    var _this = this;
    setTimeout(function() {
        //test if mouse leave the menu then hide it
        if (! _this.is_onhover)
            $(_this.div).hide();
    }, 150);
    return this;
};

this.toggle = function() {
    $(this.div).toggle();
    return this;
}

this.get_item_div = function(idx) {
    return $(this.div).find('li:eq('+idx+')');
};

};

function ubi_menu_item (name, text, separator, icon) {
this.text= text;
this.icon = icon;
this.enable = true;
this.name = (separator==true? 'separator': name);
this.click_proc;
this.enable = true;
this.div = '.ubi-menu-item-' + name;
this.init = function () {
    this.html = '<li class="ubi-menu-item-'
        + this.name + (separator? '' : ' ubi-menu-item' )
        + '">' + this.text + '</li>';
};
this.init();

};

